<template lang="pug">
  div
    footer
      div.footerBox
        div.footerleft
          div.nav
            router-link(v-bind:to="{name:'Index'}")
              span 首页
            router-link(v-bind:to="{name:'PublicCourse'}")
              span 公开课
            router-link(v-bind:to="{name:'ExcellentCourse'}")
              span 精品课
            router-link(v-bind:to="{name:'WeChatCourse'}")
              span 微课
            router-link(v-bind:to="{name:'LiveBroadcastCourse'}")
              span 直播课
          div.copyRight 版权号
        div.footerright
          div.wechatBox.otherBox
            div.circle
              img(src="../../../static/Footer/wechat.png")
            span 官方公众号
          div.qrBox
              img(src="../../../static/Footer/二维码_u23.png")
          div.sinaBox.otherBox
            div.circle
              img(src="../../../static/Footer/sina.png")
            span 官方微博
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'KalixFooter'
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  footer
    width 100%
    height 100px
    background #E6F4F5
    /*margin-bottom 20px*/
    margin-top 40px
    position absolute
  .footerBox
    width 1200px
    height 100%
    margin 0 auto
  .nav
    height 50px
    line-height 50px
    font-size 14px
  .nav span
    padding 0 20px
    color: #666
  .copyRight
    height 40px
    line-height 40px
    font-size 14px
    color #666
    padding-left 20px
  .footerleft
    float left
  .footerright
    position relative
    font-size 14px
    float right
    margin-right 60px
  .otherBox
    width 70px
    height 80px
    padding-top 20px
    float left
    text-align center
    /*cursor pointer*/
  .otherBox span
    font-size 12px
    color #bfbfbf
  .circle
    width 35px
    height 35px
    line-height 40px
    margin 0 auto
    background-color #bfbfbf
    text-align center
    border-radius 50%
    margin-bottom 5px
  .circle img
    width: 25px;
    height: 20px;
    margin-top: 7px;
  .qrBox
    width 120px
    height 120px
    /*background-color #fff*/
    /*border-radius 10px*/
    position absolute
    top -110px
    left -25px
    /*border 1px solid #ccc*/
    overflow hidden
  .wechatBox
    z-index 1
  .qrBox img
    width 120px
    height 120px
    position absolute
    top 120px
    left 0px
    transition top 500ms
  .wechatBox:hover + .qrBox img
    top 6px
  .qrBox img
    width 110px
    height 110px
</style>
